import { Form, Select, Input, Button, DatePicker } from 'antd';
import { useEffect } from 'react';
import moment from 'moment';

const { Option } = Select
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD HH:mm:ss';

 const SearchContent = ({ query, handleSearch }) => {

  const [form] = Form.useForm();

	//不能选择以后的时间
  const disabledDate = current => current && current > moment().endOf('day');

	useEffect(() => {
		form.resetFields();
	},[query])

  return (
    <Form
      layout="horizontal"
      className='search-form-style'
      form={form}
      initialValues={{ ...query }}
      onFinish={handleSearch}
      style={{ margin: '12px 0' }}
      autoComplete='off'
    >
        <Form.Item label="时间" name="time">
          <RangePicker format={dateFormat} showTime style={{ width: '380px' }} disabledDate={disabledDate} allowClear={false} />
        </Form.Item>

        <Form.Item label="抵扣类型" name="types">
          <Select mode='multiple' style={{width:135}} allowClear placeholder="请选择抵扣类型">
            <Option value="0">调整拿货抵扣</Option>
            <Option value="1">拿货退货入账</Option>
            <Option value="44">无订单退货入账</Option>
            <Option value="2">拿货抵扣</Option>
            <Option value="3">撤销拿货</Option>
            <Option value="4">采购退货入账</Option>
            <Option value="5">采购抵扣</Option>
            <Option value="6">调整采购抵扣</Option>
            <Option value="33">拆分装箱</Option>
          </Select>
        </Form.Item>

        <Form.Item label="流水单号" name="tradeNo">
          <Input style={{width:180}} placeholder="请输入流水单号" />
        </Form.Item>

        <Form.Item label="系统单号" name="omsOrderSn">
          <Input style={{width:180}} placeholder="请输入系统单号" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">查询</Button>
          <Button onClick={()=>handleSearch()} style={{marginLeft:8}}>重置</Button>
        </Form.Item>
    </Form>
  );
};

export default SearchContent
